import React, { Children } from "react";
import { Meta, Story } from "@storybook/react";
import Button from "./Button";
import { ButtonProps } from "./Button.types";

export default {
  title: "Components/Button",
  component: Button,
  argTypes: {
    size: {
      control: {
        type: "select",
        options: ["small", "medium", "large"],
      },
    },
    variant: {
      control: {
        type: "select",
        options: ["primary", "secondary", "danger", "success"],
      },
    },
    onClick: { action: "clicked" },
  },
} as Meta;

// 基础按钮模板
const Template: Story<ButtonProps> = (args) => <Button {...args} />;

// 默认按钮
export const Default = Template.bind({});
Default.args = {
  children: "Default Button",
};

// 主要按钮
export const Primary = Template.bind({});
Primary.args = {
  children: "Primary Button",
  variant: "primary",
};

// 次要按钮
export const Secondary = Template.bind({});
Secondary.args = {
  children: "Secondary Button",
  variant: "secondary",
};

// 危险按钮
export const Danger = Template.bind({});
Danger.args = {
  children: "Danger Button",
  variant: "danger",
};

// 成功按钮
export const Success = Template.bind({});
Success.args = {
  children: "Success Button",
  variant: "success",
};

// 大号按钮
export const Large = Template.bind({});
Large.args = {
  children: "Large Button",
  size: "large",
};

// 小号按钮
export const Small = Template.bind({});
Small.args = {
  children: "Small Button",
  size: "small",
};

// 禁用按钮
export const Disabled = Template.bind({});
Disabled.args = {
  children: "Disabled Button",
  disabled: true,
};
